<template name="dayrw">
	<view>
		<view style="height:80rpx">
		  <view class="tarbar">
		    <ul class="list swiht">
		             <li :class="{active:active}" @tap="showren()">每日任务</li>
		             <li :class="{active2:active2}" @tap="showcheng()">成长任务</li>
		         </ul>
		  </view>
		</view>
		<!-- 选项卡1 start -->
		<view class="tabs" v-show="meishow">
			<view class="list_ul">
						<view class="list_ul_li" v-for="(mei,index) in meiitem">
							<navigator hover-class="none" :url="mei.url" class="dwdac">
							<view class="list_ul_li_left">
							  <image :src="mei.src"  class="starta" mode="widthFix"></image>
							 </view>
							 <view class="list_ul_li_cen">
							    <view class="list_ul_li_cen_tit">
							       {{mei.title}}	               
							    </view>
							     <view class="list_ul_li_cen_span">
							       {{mei.aside}}
							     </view>
							  </view>
							   <view class="list_ul_li_right">
								   <navigator hover-class="none" :url="mei.url" 
								   :class="[ mei.location ? 'location_old' : 'location']">
								  <view v-if="(mei.location)">
									  已完成
								  </view>
								  <view v-else>
									  去完成
								  </view>
								   </navigator> 	
							   </view>
							 </navigator>
						</view>
					</view>
		</view>
		<!-- 选项卡1 end -->
		<!-- 选项卡2 strat -->
		<view  class="tabs"  v-show="chengshow">
				 	   <view class="list_ul">
				 	   	<view class="list_ul_li" v-for="(cheng,index) in chengitem">
				 	   		<navigator hover-class="none" :url="cheng.url" class="dwdac">
				 	   		<view class="list_ul_li_left">
				 	   		  <image :src="cheng.src"  class="starta" mode="widthFix"></image>
				 	   		 </view>
				 	   		 <view class="list_ul_li_cen">
				 	   		    <view class="list_ul_li_cen_tit">
				 	   		       {{cheng.title}}	               
				 	   		    </view>
				 	   		     <view class="list_ul_li_cen_span">
				 	   		        {{cheng.aside}}
				 	   		     </view>
				 	   		  </view>
				 	   		   <view class="list_ul_li_right">
				 	   			   <navigator hover-class="none" :url="cheng.url" 
								   :class="[ cheng.location === true ? 'location_old' : 'location']">
								   <view v-if=" (cheng.location) === true">已完成</view>
								   <view v-else>去完成</view>
								   </navigator> 	
				 	   		   </view>
				 	   		 </navigator>
				 	   	</view>
				 	   </view>
		</view>
		<!-- 选项卡2 end -->
	</view>
</template>

<script>
	export default{
		name:"dayrw",
		data (){
			return{
				active:true,
				active2:false,
				meishow:true,
				chengshow:false,
				meiitem:[  //每日任务 location:true 则已完成任务，location:false 则未完成任务
									 {
										src:"../../static/logosm.png",   
										title:"每日任务出单奖励（按天计算） 出单奖励（按天计算）",
										aside:'同时拿到分享+推广(订单金额10元以上）',
										url:'../../pages/mobile/lingrw',  
										location:false    
									 },
									 {
									 						src:"../../static/logosm.png",   
									 						title:"出单奖励（按天计算） 出单奖励（按天计算）",
									 						aside:'同时拿到分享+推广(订单金额10元以上）',
									 						url:'../../pages/mobile/lingrw',  
									 						location:false    
									 					
									 },
									 {
									 						src:"../../static/logosm.png",   
									 						title:"出单奖励（按天计算） 出单奖励（按天计算）",
									 						aside:'同时拿到分享+推广(订单金额10元以上）',
									 						url:'',  
									 						location:true    
									 }
				],
				chengitem:[  //成长任务
													{
														src:"../../static/logosm.png",   
														title:"成长任务出单奖励（按天计算） 出单奖励（按天计算）",
														aside:'同时拿到分享+推广(订单金额10元以上）',
														url:'../../pages/mobile/lingrw',  
														location:false    
													},
													{
														src:"../../static/logosm.png",   
														title:"成长任务出单奖励出单奖励（按天计算） 出单奖励（按天计算）",
														aside:'同时拿到分享+推广(订单金额10元以上）',
														url:'',  
														location:true    
													}
				]
				
			}
		},
		methods:{
			showren(){
				this.meishow=true;
				this.chengshow=false;
				this.active=true;
				this.active2=false;
			},
			showcheng(){
				this.meishow=false;
				this.chengshow=true;
				this.active=false;
				this.active2=true;
			}
		}
	}
</script>

<style>
	
	     .tarbar{
	  width:100%;height:80rpx;
	  background: #fff;
	}
	.list {
	          position: relative;
	          height: 80rpx;
	          width:100vw;
	          display: flex;
	          justify-content:space-around;
	          align-items: center;
	          padding:0;
	          margin:0;
	          border-bottom: 2rpx solid #ebedf0;
	            }
	.list li {
	        position: relative;
	        display: block;
	        color: #7d7e80;
	        text-align: center;
	        width: 35%;
	        height:80rpx;
			line-height: 75rpx;
	         font-size: 32rpx;
	            }
	
	            .active {
	                color: #ff80c0!important;
					border-bottom: 7rpx solid #ff80c0;
	            }
				.active2 {
				    color: #ff80c0!important;
					border-bottom: 7rpx solid #ff80c0;
				}
			
	            .list li+li+.cursor {
	                width: 50%;
	            }
	
	            .list li+li+li+.cursor {
	                width: 33.33%;
	            }
	
	            .list li.active:nth-child(2)~.cursor {
	                transform: translateX(100%);
	                -webkit-transform: translateX(100%);
	                -moz-transform: translateX(100%);
	            }
	
	            .list li.active:nth-child(3)~.cursor {
	                transform: translateX(200%);
	                -webkit-transform: translateX(200%);
	                -moz-transform: translateX(200%);
	            }
	            .list .cursor {
	                height: .2rem;
	                width: 100%;
	                display: block;
	                position: absolute;
	                bottom: 0;
	                left: 0;
	                transition: all 0.2s ease-in-out;
	                -moz-transition: all 0.2s ease-in-out;
	                -webkit-transition: all 0.2s ease-in-out;
	            }
	
	            /* 选中蓝色横条的样式可以改这里 */
	            .list .cursor::after {
	                content: '';
	                display: block;
	                background-color: #ff80c0;
	                height: 100%;
	                width: 60%;
	                margin: 0 auto;
	            }
	    /* tarbar end*/
	    .list_ul{
	  width:95%;
	  margin:0 auto;
	}
	.list_ul_li{
	  width:100%;
	  border-bottom:2rpx dashed #d4d3d3;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding:15rpx 0;
	}
	.dwdac{
		width:100%;
	    display: flex;
	  justify-content: space-between;
	  align-items: center;
	  height:100%;
	}
	.list_ul_li_left{
	  width:20%;
	  height:100%;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	}
	.list_ul_li_cen{
	  width:60%;
	  height:70%;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  flex-wrap:wrap;
	    white-space:nowrap; /*文本不换行*/
		text-overflow:ellipsis;/*设置超出部分显示...*/
		overflow: hidden;
	}
	.list_ul_li_right{
	  width:20%;
	  height:100%;
	  display: flex;
	  justify-content: flex-end;
	  align-items: center;
	}
	.location{
	     display: inline-flex;
	    padding: 5rpx 23rpx;
	    border-radius: 50rpx;
	    justify-content: space-around;
	    align-items: center;
	    color: #fff;
	    font-size: 24rpx;
	    background: #ff80c0;
	    white-space: nowrap;
	}
	.location_old{
		display: inline-flex;
		padding: 5rpx 23rpx;
		border-radius: 50rpx;
		justify-content: space-around;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
		background: #969799;
		white-space: nowrap;
	}
	.list_ul_li_cen_span{
	  width:100%;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	  color:#9e9a9b;
	  font-size:23rpx;
	  margin-top:10rpx;
	}
	.list_ul_li_cen_tit{
	     width: 100%;
	    font-weight: 500;
	    color: #717171;
	    font-size: 28rpx;
	    display: block;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.starta{
	  width:100rpx;
	}
	.location_old{
		    background: #969799;
	}
</style>
